<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form>
    <div>
      <!-- 用户名 -->
      <span>用户名：</span>
      <input type="text" name="username">
    </div>
    <div>
      <!-- 密码： -->
      <span>登录密码：</span>
      <input type="password" name="password">
    </div>
    <div>
      <!-- 提交按钮 -->
      <button>提交</button>
    </div>
  </form>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script>
    // 请求体的数据编码格式不同，后端接收到的数据格式也会不同。
    // 1. application/x-www-form-urlencoded     表单中不包含文件上传的场景，适用于普通数据的提交
    // 2. application/json                      json数据传输
    // 3. multipart/form-data                   在于能实现异步上传文件

    // 接口地址: http://www.liulongbin.top:3009/api/form
    // 请求方式: POST

    document.querySelector('form').addEventListener('submit', function (e) {
      e.preventDefault()

      axios({
        method: 'post',
        url: 'http://www.liulongbin.top:3009/api/form',
      }).then(({ data: res }) => {
        console.log(res)
      })
    })
  </script>
</body>

</html>